<template>
  <div class="pd4 video-card" @click="$emit('handleClick', item.id, $event)">
    <div class="flex border-bottom-1 pb16">
      <van-image :src="item.imgs" height="100" width="150">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
        <template v-slot:error>加载失败</template>
      </van-image>
      <div class="pl16 flexitem" style="display: block">
        <div class="fz16 flexsb top-operate">
          <span class="van-multi-ellipsis--l2 www" style="max-width: 150px">{{
            item.name
          }}</span>
          <van-popover
            v-if="useOperate"
            trigger="click"
            :actions="actions"
            v-model="showPopover"
            @select="onSelect"
            placement="bottom-end"
          >
            <template #reference>
              <img
                id="popover-link"
                src="@/assets/icon/expert-operate.png"
                alt=""
              />
            </template>
          </van-popover>
        </div>
        <div
          style="display: inline-block; width: 100%; line-height: 30px"
          class="fz12"
        >
          {{ (item.publishTime || "").split(" ")[0] }}
        </div>
        <div
          style="display: inline-block; width: 50%; text-align: left"
          class="flexsb"
        >
          <span style="color: #333333"></span><span>{{ item.view }}观看</span>
        </div>
        <div
          style="
            display: inline-block;
            line-height: 30px;
            font-weight: bolder;
            color: red;
            width: 50%;
            text-align: right;
            color: #e8541e;
            font-size: 15px;
          "
        >
          ¥ {{ item.fee }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Popover } from "vant";
export default {
  name: "VideoCard",
  data() {
    return {
      showPopover: false,
    };
  },
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    useOperate: {
      type: Boolean,
      default: false,
    },
  },
  components: { VanPopover: Popover },
  methods: {
    onSelect(val) {
      this.$emit("userSelect", { ...val, id: this.item.id });
    },
  },
  computed: {
    actions() {
      if (this.item.status === 0) {
        return [{ text: "下架" }, { text: "编辑" }];
      } else if (this.item.status === 1) {
        return [{ text: "上架" }, { text: "编辑" }];
      }
      return [{ text: "编辑" }];
    },
  },
};
</script>
<style lang="scss" scoped>
.top-operate {
  img {
    width: 16px;
    height: 16px;
  }
}
</style>
<style lang="scss">
.video-card {
  .van-image img {
    flex-shrink: 0;
    border-radius: 5px;
  }
}
.www {
  height: 46px !important;
  line-height: 23px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  white-space: initial;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  align-items: end !important;
}
</style>
